import React from 'react';
import { Badge, Descriptions, Modal, Tag } from 'antd';
import type { DescriptionsProps } from 'antd';
// 定义文章类型
interface Article {
  author: string;
  content: string;
  createTime: number;
  id: string;
  region: string;
  status: boolean;
  title: string;
}
const ArticleDetail: React.FC<{
  isArticleModalOpen: boolean;
  onEvent: () => void;
  articleDetailData?: Article; // 接收文章数据
}> = ({isArticleModalOpen,onEvent,articleDetailData}) => {

  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '序号',
      children: articleDetailData[0]?.id,
    },
    {
      key: '2',
      label: '作者',
      children: articleDetailData[0]?.author,
    },
    {
      key: '3',
      label: '板块',
      children: articleDetailData[0]?.region,
    },
    {
      key: '4',
      label: '创建时间',
      children: articleDetailData[0]?.createTime,
    },
    {
      key: '5',
      label: '状态',
      children: <Tag color={articleDetailData[0]?.status ? 'green' : "volcano"} key={articleDetailData[0]?.status}>
          {articleDetailData[0]?.status ? '发布' : '未发布'}
        </Tag>,
    },
    // {
    //   key: '5',
    //   label: '状态',
    //   children: <Badge status={articleDetailData[0]?.status ? 'success' : 'error'} text={articleDetailData[0]?.status ? '发布' : '未发布'} />
    // },
    {
      key: '6',
      label: '文章标题',
      children: articleDetailData[0]?.title,
    }
  ];


  return (
    <Modal
      open={isArticleModalOpen}
      width={1200}
      onCancel={onEvent}
      footer={null}
    >
      <Descriptions title="文章详情" items={items} />
      <div 
        style={{
          overflowY:'auto',
          height:500,
          border:'1px solid #ccc',
          marginTop:20,
          padding:10
        }}
        dangerouslySetInnerHTML={{ __html: articleDetailData[0]?.content }}
        >

      </div>
    </Modal>
  )
}

export default ArticleDetail;